<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="tab" lineColor="#2f9fff" :activeStyle="{color:'#2f9fff'}" :is-scroll="false"
				:scrollable="false" @change="_change"></u-tabs>
		</u-sticky>
		<view class="callback_tit" v-if="type == 1" @click="change_info(1)">
			<h5>调拨去向</h5>
			<view class="callback_tit_cont">
				<!-- <input type="text" :placeholder="scan_text" disabled> -->
				<span>{{scan_text}}</span>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>
		<view class="callback_box">
			<text v-if="name!== null && start == 2">{{name}} 【已选{{calculation}}】</text>
			<view class="" v-if="start == 0">
				<view class="callback">
					<text>机具号</text>
					<input type="text" placeholder="请扫描或输入机具序列号" placeholder-style="font-size:24rpx"
						v-model="among_number">
					<!-- #ifdef APP -->
					<u-icon name="scan" size="32" @click="start_scan_one"></u-icon>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-icon name="scan" size="32" @click="start_scan_wx_one"></u-icon>
					<!-- #endif -->
				</view>
			</view>
			<view class="" v-if="start == 1">
				<view class="callback">
					<text>起始序列</text>
					<input type="text" placeholder="请扫描或输入起始机具序列号" placeholder-style="font-size:24rpx"
						v-model="start_number">
					<!-- #ifdef APP -->
					<u-icon name="scan" size="32" @click="start_scan"></u-icon>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-icon name="scan" size="32" @click="start_scan_wx"></u-icon>
					<!-- #endif -->
				</view>
				<view class="callback">
					<text>截至序列</text>
					<input type="text" placeholder="请扫描或输入起始机具序列号" placeholder-style="font-size:24rpx"
						v-model="end_number">
					<!-- #ifdef APP -->
					<u-icon name="scan" size="32" @click="end_scan"></u-icon>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<u-icon name="scan" size="32" @click="end_scan_wx"></u-icon>
					<!-- #endif -->
				</view>
			</view>
			<view class="callback_list" v-if=" start == 2">
				<u-checkbox-group v-model="Arr" iconPlacement="right" placement="column" @change="checkboxChange"
					v-if="data !== undefined && data!== null && data.length>0">
					<u-checkbox activeColor="#2f9fff" v-for="(item, index) in data" :key="index" :label="item"
						:name="item" class="check"></u-checkbox>
				</u-checkbox-group>
				<u-empty v-else mode="list" icon="/static/Empty/msg_null.png" text="暂无库存">
				</u-empty>
			</view>
		</view>
		<view class="order" @click="order" v-if="type ==1">
			确认
		</view>
		<view class="order" @click="Rollback" v-if="type ==2">
			确认
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request.js');
	/*#ifdef H5*/
	import wx from 'weixin-js-sdk';
	/*#endif*/
	export default {
		data() {
			return {
				tab: [{
					name: '单个调拨'
				},{
					name: '批量调拨'
				},{
					name: '调拨列表'
				}],
				checked: [],
				start: 0, //切换
				scan_text: '请选择代理',
				policy_text: '请选择政策',
				start_number: null, //开始号
				end_number: null, //结束号
				among_number: null, //单选
				testdata: {}, //选人参数
				policy_id: null, //政策ID
				Arr: [],
				type: null,
				data: {},
				product_id: null,
				name: null,
				product_text: '请选择政策'
			}
		},
		computed: {
			calculation() {
				let nmb = 0
				if (this.start == 0) {
					if (this.among_number != null && this.among_number != '') {
						return nmb + 1
					}
				} else if (this.start == 1) {
					if (this.start_number != null && this.start_number != '' && this.end_number != '' && this.end_number !=
						null) {
						let _this = this
						let arr1 = _this.start_number.split("")
						let arr2 = _this.end_number.split("")
						let profix = "";
						let start = "";
						let end = "";
						let lock = true;
						let list = [];
						if (arr1.length == arr2.length) {
							for (var i = 0; i < arr1.length; i++) {
								if (lock) {
									if (arr1[i] == arr2[i]) {
										profix += arr1[i];
									} else {
										start += arr1[i];
										end += arr2[i];
										lock = false;
									}
								} else {
									start += arr1[i];
									end += arr2[i];
								}
							}
							for (var i = start; i <= end; i++) {
								list.push(profix + _this.padding4(i, end.length));
							}
							nmb = list.length
							return nmb
						}
					}
				} else if (this.start == 2) {
					nmb = this.Arr.length
					return nmb
				}
				return nmb
			},
		},
		onLoad(e) {
			this.type = e.type
			this.product_id = e.id
			// 注入验证配置
			/*#ifdef H5*/
			this.injectConfig()
			/*#endif*/
			let that = this
			uni.$on('updateData', function(data) {
				that.testdata = data
				that.scan_text = that.testdata.name
			})
			this._list()
		},
		beforeDestroy() {
			uni.$off('updateData');
		},
		onShow() {},
		methods: {
			injectConfig() {
				let url = window.location.href;
				uni.request({
					url: util.API_URL + '/api/v1/test',
					method: 'post',
					data: {
						url: encodeURIComponent(url)
					},
					success: (res) => {
						const data = res.data
						if (data.code == 200) {
							wx.config({
								debug: false, // 开启调试模式,
								appId: data.data.appId, // 必填，企业号的唯一标识
								timestamp: data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
								signature: data.data.signature, // 必填，签名
								jsApiList: data.data.jsApiList, // 必填，需要使用的JS接口列表
							});
							wx.ready(() => {})
							wx.error(function(err) {
								console.log(err) //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
							});
						}
					},
					fail(err) {}
				});
			},
			checkboxChange(e) {
				this.Arr = e
			},
			_change(e) {
				this.start = e.index
				this.Arr = []
				this.among_number = null
				this.end_number = null
				this.start_number = null
				if (this.start == 2 && this.type == 2) {
					// this._list()
				}
			},
			//扫码
			start_scan() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						console.log(res)
						_this.start_number = res.result
					}
				});
			},
			start_scan_wx() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.start_number = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			start_scan_one() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						console.log(res)
						_this.among_number = res.result
					}
				});
			},
			start_scan_wx_one() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.among_number = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			end_scan() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode'],
					success: function(res) {
						_this.end_number = res.result
					}
				});
			},
			end_scan_wx() {
				let _this = this
				wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function(res) {
						var resultrow = String(res.resultStr).split(",");
						if (resultrow[0] == 'CODE_128') {
							_this.end_number = resultrow[1]
						} else {
							uni.showToast({
								title: '请识别有效的条形码!',
								duration: 2000,
								icon: 'none'
							});
						}
					},
					fail: function(res) {},
				});
			},
			//调拨去向
			change_info(e) {
				uni.navigateTo({
					url: '/pages/index/exchange/exchange_list?type=' + e
				})
			},
			//确定
			padding4(num, length) {
				//这里用slice和substr均可
				return (Array(length).join("0") + num).slice(-length);
			},
			//调拨列表
			async _list() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/getFreeEquip',
					data: {
						product_id: this.product_id
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.data = res.data
				}
			},
			// 验证
			verify() {
				let _this = this
				let arr1 = _this.start_number.split("")
				let arr2 = _this.end_number.split("")
				let profix = "";
				let start = "";
				let end = "";
				let lock = true;
				let list = [];
				if (arr1.length != arr2.length) {
					uni.showToast({
						title: '长度不符!',
						duration: 2000,
						icon: 'none'
					});
				} else {
					for (var i = 0; i < arr1.length; i++) {
						if (lock) {
							if (arr1[i] == arr2[i]) {
								profix += arr1[i];
							} else {
								start += arr1[i];
								end += arr2[i];
								lock = false;
							}
						} else {
							start += arr1[i];
							end += arr2[i];
						}
					}
					for (var i = start; i <= end; i++) {
						list.push(profix + _this.padding4(i, end.length));
					}
					_this.Arr = list
				}
			},
			order() {
				if (this.start == 0) {
					if (this.among_number != null) {
						this.Arr.push(this.among_number)
					} else {
						uni.showToast({
							title: '请输入机具号',
							duration: 2000,
							icon: 'none'
						});
					}
				} else if (this.start == 1) {
					this.verify()
				}
				let _this = this
				if (_this.Arr.length > 0) {
					uni.showModal({
						title: '提交',
						content: '是否确认调拨',
						success: function(res) {
							if (res.confirm) {
								_this._other()
							}
						}
					});
				} else {
					uni.showToast({
						title: '请选择调拨机具',
						duration: 2000,
						icon: 'none',
					});
				}
			},
			Rollback() {
				if (this.start == 0) {
					if (this.among_number != null) {
						this.Arr.push(this.among_number)
					} else {
						uni.showToast({
							title: '请输入机具号',
							duration: 2000,
							icon: 'none'
						});
					}
				} else if (this.start == 1) {
					this.verify()
				}
				let _this = this
				if (_this.Arr.length > 0) {
					uni.showModal({
						title: '提交',
						content: '是否确认调拨',
						success: function(res) {
							if (res.confirm) {
								_this.back()
							}
						}
					});
				} else {
					uni.showToast({
						title: '请选择调拨机具',
						duration: 2000,
						icon: 'none',
					});
				}
			},
			//调用接口
			async _other() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/saveAllocation',
					data: {
						type: this.type, //类型：1=调拨，2=回退
						to: this.testdata.id, //下级id
						product_id: this.product_id, //政策id
						sn: this.Arr, //机具号
						remark: '' //备注
					}
				});
				let _this = this
				if (res.code != 200) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
						success() {
							this.timer = setTimeout(() => {
								uni.navigateBack({});
							}, 3000)
						}
					});
				}
			},
			//调用接口
			async back() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'setting/saveRollback',
					data: {
						sn: this.Arr, //机具号
						product_id: this.product_id
					}
				});
				let _this = this
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
						success() {
							// _this._change(0)
							this.timer = setTimeout(() => {
								uni.navigateBack({});
							}, 3000)
						}
					});
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.check {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		border-bottom: #eee 1px solid;
	}

	.zc_box {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #e7f6f4;

		.zc {
			background-color: #1296db;
			font-size: 24rpx;
			padding: 10rpx 20rpx;
			border-radius: 15rpx;
			box-sizing: border-box;
		}

		.zc_tit {
			padding: 20rpx;
			font-size: 28rpx;
		}
	}

	.callback_tit {
		margin-top: 30rpx;
		background-color: #ffffff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: #e7f6f4 1px solid;

		.callback_tit_cont {
			display: flex;
			justify-content: flex-end;
			
			span {
				padding-right: 20rpx;
			}
		}

		h5 {
			font-size: 34rpx;
			margin-right: 30rpx;
			font-weight: 500;
		}
	}

	.callback_box {
		margin-top: 30rpx;
		background-color: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;

		.callback {
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				font-size: 28rpx;
			}

			input {
				background-color: #ffffff;
				padding:20rpx;
				border-bottom: #eeeeee 1px solid;
				width: 60%;
			}
		}
	}

	.order {
		padding: 20rpx;
		box-sizing: border-box;
		width: 90%;
		margin: auto;
		border-radius: 50rpx;
		background-color: #2f9fff;
		color: #fff;
		text-align: center;
		margin-top: 30rpx;
	}

	.callback_list {
		height: 60vh;
		overflow-y: auto;
		margin-top: 20rpx;
	}
</style>